<template>
  <section class="content">
    <h3>美味小铺</h3>
    <ul class="classify">
      <router-link
        tag="li"
        v-for="item of classifyItem"
        :key="item.id"
        :to="'/menu/' + item.id"
      >
        <img :src="item.imgUrl"/>
      </router-link>
    </ul>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Content',
  computed: {
    ...mapState(['classifyItem'])
  }
}
</script>

<style lang="stylus" scoped>
  .content
    margin 20px
    box-sizing border-box
    h3
      color: #333
      text-align center
      font-size 32px
      margin 65px 0 35px
    .classify
      width 100%
      display flex
      flex-direction row
      flex-wrap wrap
      align-content stretch
      box-sizing border-box
      text-align center
      li
        width 48.5%
        margin-bottom 3%
        img
          width 100%
      li:nth-child(odd)
        margin-right 3%

</style>
